<template>
  <div class="dis-flex-col" :style="{ height: height + 'px' }">
    <div id="chart" class="chart">
      <div class="abs-rt">
        {{ sfb }}

        <button type="button" @click="添加内置指标线到main()">
          添加内置指标线到main
        </button>
        <button type="button" @click="添加内置指标线到sub()">
          添加内置指标线到sub
        </button>
        <button type="button" @click="添加other指标线到main()">
          添加other指标线到main
        </button>
        {{ linedata }}
      </div>
    </div>
  </div>
</template>
<script>
import { bus } from '@/main.js';
import { mapState, mapMutations } from 'vuex';

import { init, dispose, registerIndicator } from 'klinecharts';
import { option } from './optsMainKLine.js';
let _configOpts = option;

export default {
  name: 'mainChart',
  mixins: [], //混入
  components: {}, //组件
  props: {
    height: {
      type: [Number],
      default: function() {
        return 677;
      },
    },
  }, //集成属性
  data() {
    return {
      chartID: 'mainChart',
      linedata: [],

      chart: null,
      sfb: null,
      types: [
        {
          // 分时 日K 周K 月K 五日
        },
      ],
    };
  },
  computed: {
    ...mapState(['winSize', 'stock']),
    params_code: function() {
      let p = {
        get_type: 'range',
        prod_code: this.stockCode,
        candle_period: 6,
        // fields
        search_direction: 2,
        data_count: 300,
        start_date: this.$moment()
          .subtract(2000, 'days')
          .format('YYYY-MM-DD'),
        end_date: this.$moment().format('YYYY-MM-DD'),
      };
      return p;
    },
  },
  watch: {
    'stock.linedata': {
      deep: true,
      handler: function(nv, ov) {
        this.applyNewData(nv);
      },
    },
  },
  methods: {
    ...mapMutations([]),
    applyNewData: function(linedata) {
      if (linedata == undefined) {
        let data = this.$store.getters['stock/getLineData']();
        this.chart.applyNewData(data);
      } else {
        this.chart.applyNewData(linedata);
      }
      this.chart.resize();
    },
    init: function() {},
    添加内置指标线到main: function() {
      this.chart.createIndicator('MA', true, { id: 'candle_pane' });
    },
    添加内置指标线到sub: function() {
      this.chart.createIndicator('MA', true, { id: 'pane_1' });
    },
    添加other指标线到main: function(data) {
      let sdata = data == undefined ? new Array(2001).fill(49) : [];
      registerIndicator({
        name: 'Custom',
        shortName: 'Custom',
        figures: [{ key: 'value', title: 'Custom', type: 'line' }],
        calc: (kLineDataList) => {
          return kLineDataList.map((kLineData, i, a) => {
            return {
              value: sdata[i] || 0,
              text: sdata[i] / 10,
            };
          });
        },
      });
      this.chart.createIndicator(
        'Custom',
        true,
        {
          id: 'candle_pane',
        },
        () => {}
      );
    },
    test1: function() {},
    test2: function() {
      console.log('test2');
    },
    test3: function() {
      console.log('test3');
    },
  },
  beforeCreate: function() {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {
    this.chart = init('chart', _configOpts);
    this.chart.subscribeAction('onVisibleRangeChange', (e) => {
      // console.log(e);//e===this.chart.getVisibleRange();
      // form:number,数据左端，min0
      // realFrom:number,图表左端，可负值
      // to:number,数据右端，max
      // realTo:number,图表右端，可超值
      bus.$emit('datazoom', {
        id: this.chartID,
        event: e,
      });
      this.sfb = e;
    });
    this.chart.subscribeAction('onCrosshairChange', (e) => {});

    bus.$on('datazoom', ({ id, event }) => {
      if (id == this.chartID) return;
      this.sfb = event;
      // console.log(event);
    });
  },
  beforeUpdate: function() {},
  updated: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
};
</script>
<style lang="less" scoped>
.dis-flex-col {
  display: flex;
  flex-direction: column;
  .flexG1 {
    flex-grow: 1;
  }
  .flexG0 {
    flex-grow: 0;
  }
}

.chart {
  height: 100%;
  overflow: hidden;
}
.abs-rt {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 7;
  width: 60%;
  height: 50%;
  overflow: auto;
  background-color: rgba(255, 255, 255, 0.7);
  color: #333;
}
</style>
